<template>
  <div>
    <el-drawer v-bind="$attrs" :class="['cjui-drawer', useScrollbar && 'use-scroll-bar', noBodyPadding && 'no-body-padding']">
      <template v-if="$slots.header" #header>
        <slot name="header"></slot>
      </template>

      <el-scrollbar v-if="useScrollbar">
        <div class="cjui-drawer__body">
          <slot></slot>
        </div>
      </el-scrollbar>
      <slot v-else></slot>

      <template v-if="$slots.footer" #footer>
        <slot name="footer"></slot>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'CjuiDrawer'
})

defineProps({
  // 扩展属性
  useScrollbar: {
    type: Boolean,
    default: true,
  },
  noBodyPadding: {
    type: Boolean,
    default: false,
  },
})
</script>

<style lang="scss">
.cjui-drawer.el-drawer {
  overflow: unset;

  &.rtl .el-drawer__close-btn {
    top: 12px;
    left: -42px;
  }

  &.ltr .el-drawer__close-btn {
    top: 12px;
    right: -42px;
  }

  &.ttb .el-drawer__close-btn {
    right: 12px;
    bottom: -42px;
  }

  &.btt .el-drawer__close-btn {
    top: -42px;
    right: 12px;
  }

  .el-drawer__close-btn {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .el-drawer__close {
    font-size: 32px;
    font-weight: 600;
  }

  .el-drawer__close-btn:hover {
    transform: rotate(180deg);
  }

  .el-drawer__body {
    padding: 0 20px;
    overflow: auto;
  }

  &.use-scroll-bar,
  &.no-body-padding {
    .el-drawer__body {
      padding: 0;
    }
  }
}

.cjui-drawer__body {
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
